<template>
	<div class="preview">
		<div>
			
			
			
			<div style="width: 100%;">
				<Carousel autoplay v-model="value1" loop>
			        <CarouselItem>
			            <img class="banner"  src="../../static/img/banner.png" />
			        </CarouselItem>
			        <CarouselItem>
			            <img class="banner"  src="../../static/img/banner2.png" />
			        </CarouselItem>
			    </Carousel>
				<!--<img class="banner"  src="../../static/img/banner.png" />-->
			</div>
			
			
			<!--手机端菜单-->
			<div class="m-menu"  >
				<Row type="flex" align="middle" >
					<Col v-for="item,index in serve_icon" :key="index" span="8" style="height: 50px;display: flex;align-items: center;justify-content: center;">
						<div @click="routeLink(item.name)" v-bind:style="{ backgroundColor: colorList[index]}" style="width: 80%;height: 40px;border-radius: 3px;display: flex;align-items: center;justify-content: center;">
							{{item.name}}
						</div>
					</Col>
				</Row>
			</div>
			<!--<div class="m-menu"  >
				<Row type="flex" align="middle" >
					<Col v-for="(item,index) in menu_tab" :key="item.value" span="12" style="height: 50px;display: flex;align-items: center;justify-content: center;">
						<div v-bind:style="{ backgroundColor: colorList[index]}" style="width: 80%;height: 40px;border-radius: 3px;display: flex;align-items: center;justify-content: center;">
							{{item.label}}
						</div>
					</Col>
				</Row>
			</div>-->
			<!---->
			
			<div style="background-color: #f7f7f7;width: 100%;margin-top: -10px;">
				<!--服务项目-->
				<div class="small-hiddle" style="width: 100%;background-color: white;">
					<div  style="width: 1200px;margin: 0 auto;padding: 40px 0px 0px 0px;">
						<Row type="flex" align="middle" justify="center">
							<Col span="24" style="text-align: center;">
								<div style="font-size: 25px;">
					        		<div>服务项目</div>
					        		<div style="height: 2px;width: 80px;background-color: #009a00;margin: 0 auto;margin-top: 10px;"></div>
					        	</div>
							</Col>
						</Row>
					</div>
					<div >
						<Row type="flex" align="middle" justify="center">
							<Col  style="text-align: center;width: 1200px;">
								<span v-for="(item,index) in serve_icon" @click="routeLink(item.name)" :key="item.name" style="cursor: pointer;">
									<div class="type-hoverclass" style="background-color: white;display: inline-block;height: 115px;margin:30px;">
										<div class="serve-icon-hoverclass" style="border:1px solid #5e5e5e ;width:90px;height:90px;border-radius: 50%;">
											<img class="serve-img-hoverclass" :src="item.src_img"/>
											<img style="display: none;" class="serve-img-hoverclass-display" :src="item.src_hover_img"/>
										</div>
										<p style="padding-top:10px ;font-size: 15px;">{{item.name}}</p>
									</div>
								</span>
							</Col>
						</Row>
					</div>
				</div>
				
				
				<div class="small-hiddle" style="height: 1px;width: 800px;background-color: #eeeeee;margin: 0 auto;margin-top: -1px;"></div>
				<div class="body-card">
					<Row type="flex" align="middle" >
						<Col :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<router-link :to="{path:'/homeMakingServe/moveHouse'}">
									<div class="body-card-width">
										<img style="width: 100%;" src="../../static/img/serve_img/serve_img_1.png"/>
										<div style="text-align: center;">
											<p class="body-title">
												搬家搬厂
											</p>
											<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
												月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
											</p>
											<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
												￥199
											</p>
										</div>
									</div>
								</router-link>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<router-link :to="{path:'/homeMakingServe/cleanHouse'}">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../static/img/serve_img/serve_img_4.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											钟点保洁
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
								</router-link>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<router-link :to="{path:'/homeMakingServe/homeRepair'}">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../static/img/serve_img/serve_img_3.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											家电清洗
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
								</router-link>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<router-link :to="{path:'/homeMakingServe/homeRepair'}">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../static/img/serve_img/serve_img_5.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											水电维修
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
								</router-link>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<router-link :to="{path:'/homeMakingServe/homeRepair'}">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../static/img/serve_img/serve_img_6.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											水管清洗
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
								</router-link>
							</div>
						</Col>
						<Col  :xs="12" :lg="8">
							<div style="width: 100%;max-height: 400px;">
								<router-link :to="{path:'/homeMakingServe/homeRepair'}">
								<div class="body-card-width">
									<img style="width: 100%;" src="../../static/img/serve_img/serve_img_2.png"/>
									<div style="text-align: center;">
										<p class="body-title">
											房屋维修
										</p>
										<p class="body-card-text" style="width: 80%;margin:0 auto;color: #797979;font-size: 14px;">
											月嫂是母婴护理师的俗称，主要是专业护理产妇与新生儿，服务的
										</p>
										<p style="font-size: 26px;padding: 20px 0px;color: #f09a04;">
											￥199
										</p>
									</div>
								</div>
								</router-link>
							</div>
						</Col>
					</Row>
				</div>
			</div>
			
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
//				menu_tab:[
//					{"label": "护理服务","value": "1"},
//					{"label": "保洁服务","value": "2"},
//					{"label": "清洗服务","value": "3"},
//					{"label": "维修换新","value": "4"},
//				],
				value1: 0,
				serve_icon:[
					{"name":"家政培训","src_img":require('../../static/serve_icon/serve_1.png'),"src_hover_img":require('../../static/serve_icon/serve_1_1.png')},
					{"name":"月嫂服务","src_img":require('../../static/serve_icon/serve_2.png'),"src_hover_img":require('../../static/serve_icon/serve_2_1.png')},
					{"name":"家庭保姆","src_img":require('../../static/serve_icon/serve_3.png'),"src_hover_img":require('../../static/serve_icon/serve_3_1.png')},
					{"name":"搬家搬厂","src_img":require('../../static/serve_icon/serve_4.png'),"src_hover_img":require('../../static/serve_icon/serve_4_1.png')},
					{"name":"钟点保洁","src_img":require('../../static/serve_icon/serve_5.png'),"src_hover_img":require('../../static/serve_icon/serve_5_1.png')},
					{"name":"房屋维修","src_img":require('../../static/serve_icon/serve_6.png'),"src_hover_img":require('../../static/serve_icon/serve_6_1.png')},
					{"name":"水电维修","src_img":require('../../static/serve_icon/serve_7.png'),"src_hover_img":require('../../static/serve_icon/serve_7_1.png')},
					{"name":"护工护理","src_img":require('../../static/serve_icon/serve_8.png'),"src_hover_img":require('../../static/serve_icon/serve_8_1.png')},
				],
				colorList:[
					"#fff2b5","#ffd661","#8cd6b5","#ff8c78","#8a8cb2","#fa6e85","#de9dd6","#dbf977","#97ec71","#4fc5c7","#8bc34a","#ffeb3b","#e4a2a3"
				],
				tabSelect:0,
			}
		},
		methods:{
			toggleTab:function(index){
				this.tabSelect = index;
			},
			routeLink:function(name){
//				console.log(name);
				switch(name){
					case "家政培训":
		       			this.$router.push("/homeMarkTrain")
			     		break;
		     		case "月嫂服务":
		       			this.$router.push("/professionMaternity")
			     		break;
			     	case "家庭保姆":
		       			this.$router.push("/homeNurse")
			     		break;
			     	case "搬家搬厂":
		       			this.$router.push("/homeMakingServe/moveHouse")
			     		break;	
			     	case "房屋维修":
		       			this.$router.push("/homeMakingServe/homeRepair")
			     		break;
			     	case "水电维修":
		       			this.$router.push("/homeMakingServe/homeRepair")
			     		break;	
			     	case "护工护理":
		       			this.$router.push("/homeNurse/nurseInfo")
			     		break;	
			     	default:
			       		break;
			   	}
			}
		}
	}
</script>

<style lang="css" scoped>
	/** 电脑 **/
	@media only screen and (min-width: 540px){
		.preview >>> .top{
			width: 1200px;
			margin: 0 auto;
		}
		.preview >>> .m-top{
			display: none !important;
		}
		.preview >>> .banner{
			width: 100%;
		}
		.preview >>> .m-menu{
			display: none;
		}
		.preview >>> .body-title{
			font-size: 22px;
			color: #000000;
			padding: 15px 20px;
		}
		.preview >>> .body-card{
			padding-top: 10px;
			width: 1200px;
			margin: 0 auto;
		}
		.preview >>> .body-card-width{
			cursor: pointer;
			margin:23px;
			background-color: white;
		}
		.preview >>> .type-hoverclass{
			position: relative;
			top: 0px;
			transition: all 0.2s;;
		}
		.preview >>> .type-hoverclass:hover{
			color: #009a00;
			top: -4px;
		}
		.preview >>> .serve-icon-hoverclass:hover{
			background-color: #009a00;
			border: 1px solid white !important;
			top: -4px;
		}
		.preview >>> .serve-icon-hoverclass:hover .serve-img-hoverclass{
			display: none;
		}
		.preview >>> .serve-icon-hoverclass:hover .serve-img-hoverclass-display{
			display: block !important;
		}
		
	}
	/** 手机 **/
	@media only screen and (max-width: 540px) {
		.preview >>> .top{
			display: none !important;
		}
		.preview >>> .banner{
			width: 100%;
		}
		.preview >>> .m-top{
			width: 100%;
			height: 50px;
			background-color: #009a00;
		}
		.preview >>> .body-card{
			width: 100%;
		}
		.preview >>> .body-title{
			font-size: 16px;
			padding: 10px 20px;
		}
		.preview >>> .body-card-width{
			margin:5px;
			background-color: white;
		}
		.preview >>> .body-card-text{
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.preview >>> .m-menu{
			
			width: 90%;
			margin: 10px auto;
			/*padding-top: 10px;*/
		}
		.preview >>> .foot{
			text-align: center;
			background-color: #009a00;
			padding: 15px;
		}
		.preview >>> .small-hiddle{
			display: none !important;	
		}
	}
	
</style>